window.addEventListener('load', function () {
    const max = document.querySelector('.picture-bottom .max img')
    const ul = document.querySelector('.min .minPicture')
    ul.addEventListener('mouseover', function (e) {
        // console.log(e.target.tagName)
        if (e.target.tagName === "IMG") {
            document.querySelector('.min .minPicture img.active').classList.remove('active')
            e.target.classList.add('active')
            max.src = e.target.src
            largeDiv.style.backgroundImage = `url(${e.target.src})`
        }
    })
    const largeDiv = document.querySelector('.picture-bottom  .picture-top')//da
    const layerDiv = document.querySelector('.picture-bottom .max .layer')//zhe
    const middleDiv = document.querySelector('.salespopularity .picture-bottom .max')//he
    document.querySelector('.picture-bottom .max').addEventListener('mouseenter', function () {
        layerDiv.style.display = 'block'
        largeDiv.style.display = 'block'
    })
    document.querySelector('.picture-bottom .max').addEventListener('mouseleave', function () {
        layerDiv.style.display = 'none'
        largeDiv.style.display = 'none'
    })

    middleDiv.addEventListener('mousemove', function (e) {

        let targetX = e.pageX - middleDiv.parentNode.parentNode.parentNode.offsetLeft - layerDiv.offsetWidth / 2
        let targetY = e.pageY - middleDiv.parentNode.parentNode.parentNode.offsetTop - layerDiv.offsetHeight / 2

        if (targetX < 0) {
            targetX = 0
        }

        if (targetX > middleDiv.offsetWidth - layerDiv.offsetWidth) {
            targetX = middleDiv.offsetWidth - layerDiv.offsetWidth
        }

        if (targetY < 0) {
            targetY = 0
        }

        if (targetY > middleDiv.offsetHeight - layerDiv.offsetHeight) {
            targetY = middleDiv.offsetHeight - layerDiv.offsetHeight
        }

        layerDiv.style.left = `${targetX}px`
        layerDiv.style.top = `${targetY}px`

        largeDiv.style.backgroundPositionX = -targetX * 2 + 'px'
        largeDiv.style.backgroundPositionY = -targetY * 2 + 'px'
    })
    //地址

    let newArr = JSON.parse(arr)
    const down = document.querySelector('.shoot-details .delivery .select i')
    // 给地址封装函数
    Selectadress()
    function Selectadress() {
        let span = document.querySelector(".select span")
        span.innerHTML = '北京市 市辖区 东城区'
        down.addEventListener('click', function (e) {
            console.log(888)
            e.stopPropagation()
            if (document.querySelector('.option')) {
                this.removeChild(document.querySelector('.option'))
            }
            let str = ''
            let newDiv = document.createElement('div')
            newDiv.classList.add('option')
            str = newArr.map(item => {
                const { code, level, name, areaList } = item
                return `<span>${name}</span>`
            }).join('')
            newDiv.innerHTML = str
            let str1 = ''
            for (let i = 0; i < newArr.length; i++) {
                if (e.target.innerHTML === newArr[i].name) {
                    localStorage.setItem('temp', e.target.innerHTML)
                    for (let j = 0; j < newArr[i].areaList.length; j++) {
                        str1 += `<span>${newArr[i].areaList[j].name}</span>`
                    }
                    newDiv.innerHTML = str1
                }
            }
            let str2 = ''
            for (let i = 0; i < newArr.length; i++) {
                for (let j = 0; j < newArr[i].areaList.length; j++) {
                    if (e.target.innerHTML === newArr[i].areaList[j].name) {
                        localStorage.setItem('temp1', e.target.innerHTML)
                        for (let k = 0; k < newArr[i].areaList[j].areaList.length; k++) {
                            str2 += `<span>${newArr[i].areaList[j].areaList[k].name}</span>`
                        }
                        newDiv.innerHTML = str2
                    }
                }
            }
            this.appendChild(newDiv)
            for (let i = 0; i < newArr.length; i++) {
                for (let j = 0; j < newArr[i].areaList.length; j++) {
                    for (let k = 0; k < newArr[i].areaList[j].areaList.length; k++) {
                        if (e.target.innerHTML === newArr[i].areaList[j].areaList[k].name) {
                            localStorage.setItem('temp2', e.target.innerHTML)
                            let temp = localStorage.getItem('temp')
                            let temp1 = localStorage.getItem('temp1')
                            let temp2 = localStorage.getItem('temp2')
                            span.innerHTML = temp + ' ' + temp1 + ' ' + temp2
                        }
                    }
                }
            }
        })
    }
    const shootPicture = document.querySelector('.shootPicture')
    shootPicture.addEventListener('click', function (e) {

        if (e.target.tagName === "IMG") {
            const shootImgs = document.querySelectorAll('.shootPicture img.minImg')
            for (let i = 0; i < shootImgs.length; i++) {
                shootImgs[i].classList.remove('minImg')
            }
            e.target.classList.add('minImg')
            const whiteSize = document.querySelector('.whiteSize')
            const blackSize = document.querySelector('.blackSize')

            if (e.target.dataset.index === '1') {
                whiteSize.style.display = 'none'
                blackSize.style.display = 'block'
            }
            else if (e.target.dataset.index === '2') {
                whiteSize.style.display = 'block'
                blackSize.style.display = 'none'
            }
        }

    })
    const blackSize = document.querySelector('.blackSize')

    blackSize.addEventListener('click', function (e) {
        if (e.target.tagName === "SPAN") {
            const shootSizes = document.querySelectorAll('.blackSize span.lightSpan')
            for (let i = 0; i < shootSizes.length; i++) {
                shootSizes[i].classList.remove('lightSpan')
            }
            e.target.classList.add('lightSpan')
        }

    })
    const whiteSize = document.querySelector('.whiteSize')

    whiteSize.addEventListener('click', function (e) {
        if (e.target.tagName === "SPAN") {
            const shootSizes = document.querySelectorAll('.whiteSize span.lightSpan')
            for (let i = 0; i < shootSizes.length; i++) {
                shootSizes[i].classList.remove('lightSpan')
            }
            e.target.classList.add('lightSpan')
        }

    })
    const plus = document.querySelector('.shoot-details .plus')
    plus.addEventListener('click', function () {
        const inputValue = document.querySelector('.shoot-details input')
        inputValue.value++

    })
    const sub = document.querySelector('.shoot-details .subtract')
    sub.addEventListener('click', function () {
        const inputValue = document.querySelector('.shoot-details input')
        inputValue.value--
        if (inputValue.value <= 1) {
            inputValue.value = 1
        }

    })

    const allA = this.document.querySelectorAll('.bigcircle ')
    let index = 0
    const constance = document.querySelector('.exhibit1')
    const incorrect = document.querySelector('.incorrect')
    const wrong = document.querySelector('.wrong')
    incorrect.addEventListener('click', function () {
        index++
        console.log('aaa')
        document.querySelector('.exhibit .min').style.left = -constance.offsetWidth * 5 * index + 100 * index + 'px'
        if (index > 3) {
            document.querySelector('.exhibit .min').style.left = 30 + 'px'
            index = 0
        }
        document.querySelector('.bigcircle.highlight').classList.remove('highlight')
        allA[index].classList.add('highlight')

    })

    wrong.addEventListener('click', function () {
        index++
        console.log('aaa')
        document.querySelector('.exhibit .min').style.left = -constance.offsetWidth * 5 * index + 98 * index + 'px'
        if (index > 3) {
            document.querySelector('.exhibit .min').style.left = 30 + 'px'
            index = 0
        }
        document.querySelector('.bigcircle.highlight').classList.remove('highlight')
        allA[index].classList.add('highlight')
    })
    const cutTitle = document.querySelector('.title')
    const productData = document.querySelector('.productData')
    const evaluation = document.querySelector('.evaluation')
    cutTitle.addEventListener('click', function (e) {
        if (e.target.tagName === 'A') {
            if (e.target.dataset.index === '1') {
                const moveIntensity = document.querySelector('.intensity')
                moveIntensity.style.transform = 'translateX(0)'
                productData.style.display = 'block'
                evaluation.style.display = 'none'
            }
            else if (e.target.dataset.index === '2') {
                const moveIntensity = document.querySelector('.intensity')
                moveIntensity.style.transform = 'translateX(160px)'
                productData.style.display = 'none'
                evaluation.style.display = 'block'
            }
        }
    })
    const btn = document.querySelector('.shoot-details button')

    btn.addEventListener('click', function () {
        const lightSpans = document.querySelector('.shootSame span.lightSpan')
        const lightImgs = document.querySelector(' .shootPicture img.minImg')
        if (lightSpans && lightImgs) {
            document.querySelector('.cart').style.display = 'block'
            document.querySelector('.shootPicture img.minImg').classList.remove('minImg')
            document.querySelector('.blackSize span.lightSpan').classList.remove('lightSpan')
            document.querySelector('.whiteSize span.lightSpan').classList.remove('lightSpan')
        }
        else {
            document.querySelector('.specification').style.display = 'block'
            location.href = '../html/shoppimg.html'
        }

    })
    document.body.addEventListener('click', function (e) {
        const select = document.querySelector('.delivery .select i')
        const div = document.querySelector('.select .option')
        if (div) {
            select.removeChild(div)
        }
        if (e.target.className !== 'btn') {
            document.querySelector('.cart').style.display = 'none'
            document.querySelector('.specification').style.display = 'none'
        }

    })
})
